<template>
    <div class="container">
        <div class="nav">
            <div class="time">{{ now }}</div>
            <div class="city" @click="state.show = true">切换城市</div>
        </div>
        <div class="city-info">
            <p class="city">{{ state.city }}</p>
            <p class="weather">{{ state.today.weather }}</p>
            <h2 class="temp">
                <em>{{ state.today.temperature }}</em>℃
            </h2>
            <div class="detail">
                <span>风力:{{ state.today.windPower }} 级| </span>
                <span> 风向:{{ state.today.windDirection }} 风| </span>
                <span>空气湿度: {{ state.today.humidity }}%</span>
            </div>
            <div class="future">
                <div class="group">
                    明天:
                    <span class="tm">白天:{{ state.tomorrow.dayTemp }}℃
                        {{ state.tomorrow.dayWeather }}
                        {{ state.tomorrow.dayWindDir }}
                        {{ state.tomorrow.dayWindPower }}</span>
                    <span class="tm">夜间:{{ state.tomorrow.nightTemp }}℃
                        {{ state.tomorrow.nightWeather }}
                        {{ state.tomorrow.nightWindDir }}
                        {{ state.tomorrow.nightWindPower }}</span>
                </div>
                <div class="group">
                    后天:
                    <span class="tm">白天:{{ state.aftertomorrow.dayTemp }}℃
                        {{ state.aftertomorrow.dayWeather }}
                        {{ state.aftertomorrow.dayWindDir }}
                        {{ state.aftertomorrow.dayWindPower }}</span>
                    <span class="tm">夜间:{{ state.aftertomorrow.nightTemp }}℃
                        {{ state.aftertomorrow.nightWeather }}
                        {{ state.aftertomorrow.nightWindDir }}
                        {{ state.aftertomorrow.nightWindPower }}</span>
                </div>
            </div>

        </div>
        <div class="echarts-wrap" ref="echartsWrap"></div>
        <van-action-sheet v-model:show="state.show">
            <div class="content">
                <van-area title="地区" :area-list="areaList" :columns-num="2" @confirm="selectCity"
                    @cancel="state.show = false" />
            </div>
        </van-action-sheet>
    </div>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { areaList } from '@vant/area-data';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

let now = ref('00:00:00')
setInterval(() => {
    now.value = new Date().toLocaleTimeString()
}, 1000);

const state = reactive({
    city: '',
    today: {},
    show: false,
    tomorrow: {},
    aftertomorrow: {}
})


AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            console.log(result);
            state.city = result.city
            getWeather(result.city)
        }
    })
})

const getWeather = (city) => {
    //加载天气查询插件
    AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
            console.log(err, data);
            state.today = data
        });
    });

    //加载天气查询插件
    AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getForecast(city, function (err, data) {
            console.log(err, data);
            state.tomorrow = data.forecasts[1]
            state.aftertomorrow = data.forecasts[2]

            nextTick(() => { // 保证内部的逻辑会在页面渲染完毕后执行
                initEcharts(data.forecasts.map(item => item.dayTemp))
            })
        });
    });
}

const selectCity = ({ selectedOptions }) => {
    console.log(selectedOptions[1].text)
    state.city = selectedOptions[1].text
    getWeather(state.city)
    state.show = false
}

const echartsWrap = ref(null)
const initEcharts = (arr) => {
    // console.log(echartsWrap.value);
    let myChart = echarts.init(echartsWrap.value)
    myChart.setOption({
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['今天', '明天', '后天', '大后天']
        },
        yAxis: {},
        series: [
            {
                name: '温度',
                type: 'line',
                data: arr
            }
        ]
    });
}
// onMounted(()=>{
//     initEcharts(data)
// })
</script>

<style lang="css" scoped>
.container {
    min-height: 100vh;
    background-color: #000;
    opacity: 0.7;
    color: #fff;
}

.nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.city-info {
    text-align: center;
}

p {
    margin-top: 10px;
}

.temp {
    font-size: 30px;
    margin: 10px 0;
}

.temp em {
    font-size: 34px;
}

.future {
    margin-top: 30px;
    padding: 0 10px;
}

.group {
    height: 40px;
    line-height: 44px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    padding: 0 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.echarts-wrap {
    width: 100%;
    height: 50vh;
}
</style>